<template>
    <ClientOnly>
        <popup
            :show="pupupShow"
            :clickModalClose="true"
            :title="`知识库引用（${quotes.length} 条）`"
            width="600px"
            confirm-button-text=""
            cancel-button-text=""
            @close="handleClose()"
        >
            <div class="h-[65vh]">
                <el-scrollbar>
                    <div class="py-4 px-6">
                        <div
                            v-for="(item, index) in quotes"
                            :key="index"
                            class="py-[6px] px-[10px] border border-solid border-br-light rounded mb-[10px]"
                        >
                            <div class="flex items-center justify-between mb-3">
                                <el-tag type="info">#{{ index + 1 }} | {{ item.file.name }}</el-tag>
                                <div class="flex gap-3">
                                    <div v-if="item.rerank_score >= 0">
                                        <span class="text-xs text-tx-secondary mr-1.5">
                                            重排分数: {{ item.rerank_score }}
                                        </span>
                                    </div>
                                    <div v-if="item.full_score >= 0">
                                        <span class="text-xs text-tx-secondary mr-1.5">
                                            全文检索: {{ item.full_score }}
                                        </span>
                                    </div>
                                    <div v-if="item.emb_score >= 0">
                                        <span class="text-xs text-tx-secondary mr-1.5">
                                            语义检索: {{ item.emb_score }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="text-tx-secondary">
                                {{ item.question || item.chunk_texts }}
                            </div>
                            <!-- <div class="flex items-center mt-2">
                                <nuxt-link
                                    v-if="item.file?.path"
                                    class="underline text-tx-regular hover:text-tx-primary"
                                    :to="item.file.path"
                                    :external="true"
                                    target="_blank"
                                >
                                    {{ item.file.name }}
                                </nuxt-link>
                            </div> -->
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </popup>

    </ClientOnly>
</template>

<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        show: boolean;
        quotes?: any[];
    }>(),
    {
        quotes: () => []
    }
)

const emits = defineEmits<{
    (event: 'close'): void
}>()

const pupupShow = ref<boolean>(false)

const handleClose = () => {
    emits('close')
    pupupShow.value = false
}

watch(
    () => props.show,
    (val) => {
        pupupShow.value = val
    }, {
        immediate: true
    }
)
</script>
